<template>
  <div class="view">
    <div class="view__left">
      <DepartmentList @refresh="refresh" />
    </div>
    <div class="view__right">
      <ProTable ref="Table" :columns="columns" :request-api="getUserPage" :request-auto="false" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { NAvatar, NButton, NSpace } from 'naive-ui'
import ProTable from '@/components/pro-table/index.vue'
import { getUserPage } from '@/api/sys/role'
import DepartmentList from './components/department-list.vue'

defineOptions({ name: 'user' })

const columns: any = [
  {
    title: '头像',
    key: 'headImg',
    width: 80,
    render: (row: any) => h(NAvatar, { src: row.headImg }),
  },
  { title: '用户名', key: 'username', width: 150 },
  { title: '姓名', key: 'name', width: 150 },
  { title: '昵称', key: 'nickName', width: 150 },
  { title: '部门名称', key: 'departmentName', width: 150 },
  { title: '角色', key: 'roleName', width: 150 },
  { title: '状态', key: 'status', width: 150 },
  { title: '手机号码', key: 'phone', width: 150 },
  { title: '备注', key: 'remark', width: 150 },
  { title: '创建时间', key: 'createTime', width: 150 },
  {
    fixed: 'right',
    title: '操作',
    key: 'actions',
    width: 240,
    render: () => {
      return h(NSpace, null, {
        default: () => [
          h(NButton, { ghost: true, size: 'medium', type: 'default' }, { default: () => '转移' }),
          h(NButton, { ghost: true, size: 'medium', type: 'primary' }, { default: () => '编辑' }),
          h(NButton, { ghost: true, size: 'medium', type: 'error' }, { default: () => '删除' }),
        ],
      })
    },
  },
]

const Table = ref()

async function refresh(params: any) {
  console.log('刷新', params)
  await Table.value.getTableList(params)
}
</script>

<style lang="scss" scoped>
.view {
  display: flex;
  position: relative;

  &__left {
    flex-shrink: 0;
    width: 300px;
  }

  &__right {
    padding-left: 16px;
    flex: 1;
    position: relative;
    border-left: 1px solid #000;
    overflow: hidden;
  }
}
</style>
